<template>
  <div class="ax_default box_2" />
  <!--   签约信息 表头-->
  <span class="text-large font-600 mr-6" v-text="form.title" />
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="签约状态">
      <el-select v-model="form.Sign_state" placeholder="请选择">
        <el-option label="1" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="签约机构">
      <el-select v-model="form.Sign_team" placeholder="请选择">
        <el-option label="1" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="医生团队">
      <el-select v-model="form.region" placeholder="请选择">
        <el-option label="2" value="1" />
      </el-select>
    </el-form-item>
    <!--    封装的导入方法 -->
    <el-button type="primary" class="mb-[20px] float-right" @click="exportExcel"
      >导出</el-button
    >
    <el-form-item label="服务包">
      <el-select v-model="form.Pack_type" placeholder="请选择">
        <el-option label="1" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="选择时间" size="large" style="font-weight: 700">
      <el-date-picker
        v-model="form.Sign_time"
        type="daterange"
        unlink-panels
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
      />
    </el-form-item>
    <el-form-item>
      <el-input
        v-model="form.Search"
        class="w-50 m-2"
        placeholder="请输入关键字"
        :prefix-icon="Search"
      />
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { defineComponent, ref, reactive, toRaw } from "vue";
//获取路由
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { useColumns } from "../contractmanage/columns";
//写导入文件
const { exportExcel } = useColumns();
// 根据路由判断
const form = reactive({
  region: "",
  Sign_state: "",
  Sign_institution: "",
  Sign_team: "",
  Pack_type: "",
  Search: "",
  title: "待处理签约"
});
const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];
const Sign_time = ref("");
const formInline = reactive({
  user: "",
  region: ""
});
const title = () => {
  switch (toRaw(useRouter()).currentRoute.value.fullPath) {
    case "/contractmanage/beingcontractlist":
      return (form.title = "待处理签约");
      break;
    case "/contractmanage/contractlist":
      return (form.title = "待处理签约");
      break;
    case "/servemanage/servelist":
      return (form.title = "待处理服务");
      break;
    case "/servemanage/serverrecordlist":
      return (form.title = "服务记录");
      break;
  }
};
title();
</script>
<style>
.box_2 {
  width: 6px;
  height: 20px;
  float: left;
  background-color: rgba(41, 132, 248, 1);
  border-radius: 8px;
}
.mr-6 {
  margin-left: 1.5rem;
  font-size: 20px;
  line-height: 20px;
}
.el-header {
  height: 150px;
}
.demo-form-inline {
  margin: 20px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.m-2 {
  width: 25rem;
}
</style>
